<template>
  <div class="check-record-container">
    <h2>盘点记录</h2>
    
    <el-card class="filter-card">
      <el-form :inline="true" :model="searchParams" class="search-form">
        <el-form-item label="盘点计划">
          <el-select v-model="searchParams.planId" placeholder="选择盘点计划">
            <el-option label="全部" value="" />
            <el-option label="2024年Q1季度盘点" value="1" />
            <el-option label="2024年2月月度盘点" value="2" />
            <el-option label="IT设备专项盘点" value="3" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="资产编号/名称">
          <el-input
            v-model="searchParams.keyword"
            placeholder="请输入资产编号或名称"
            clearable
            style="width: 200px;"
          />
        </el-form-item>
        
        <el-form-item label="盘点状态">
          <el-select v-model="searchParams.status" placeholder="选择盘点状态">
            <el-option label="全部" value="" />
            <el-option label="正常" value="normal" />
            <el-option label="丢失" value="lost" />
            <el-option label="损坏" value="damage" />
            <el-option label="位置不符" value="moved" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="盘点时间">
          <el-date-picker
            v-model="searchParams.checkTimeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px;"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="searchRecords">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="success" @click="exportRecords">
            <el-icon><Download /></el-icon> 导出记录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="records-card">
      <el-table
        :data="recordsData"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="加载中"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="assetCode" label="资产编号" width="180" />
        <el-table-column prop="assetName" label="资产名称" />
        <el-table-column prop="assetType" label="资产类型" width="120" />
        <el-table-column prop="department" label="所属部门" width="120" />
        <el-table-column prop="user" label="使用人" width="100" />
        <el-table-column prop="planName" label="盘点计划" width="180" />
        <el-table-column prop="checkBy" label="盘点人" width="100" />
        <el-table-column prop="checkTime" label="盘点时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.checkTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="盘点结果" width="100">
          <template #default="scope">
            <el-tag
              :type="getStatusTagType(scope.row.status)"
              :effect="getStatusTagEffect(scope.row.status)"
            >
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150">
          <template #default="scope">
            <el-tooltip :content="scope.row.remark || '无'" placement="top">
              <div class="remark-content">{{ scope.row.remark || '无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button type="primary" text size="small" @click="viewRecordDetail(scope.row)">
              详情
            </el-button>
            <el-button type="success" text size="small" @click="editRecord(scope.row)" v-if="scope.row.status !== 'normal'">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="盘点记录详情"
      width="50%"
      :before-close="handleDetailClose"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="资产编号">{{ selectedRecord.assetCode }}</el-descriptions-item>
        <el-descriptions-item label="资产名称">{{ selectedRecord.assetName }}</el-descriptions-item>
        <el-descriptions-item label="资产类型">{{ selectedRecord.assetType }}</el-descriptions-item>
        <el-descriptions-item label="资产原值">{{ selectedRecord.originalValue }}元</el-descriptions-item>
        <el-descriptions-item label="当前状态">{{ selectedRecord.currentStatus }}</el-descriptions-item>
        <el-descriptions-item label="所属部门">{{ selectedRecord.department }}</el-descriptions-item>
        <el-descriptions-item label="使用人">{{ selectedRecord.user }}</el-descriptions-item>
        <el-descriptions-item label="存放位置">{{ selectedRecord.location }}</el-descriptions-item>
        <el-descriptions-item label="盘点计划">{{ selectedRecord.planName }}</el-descriptions-item>
        <el-descriptions-item label="盘点人">{{ selectedRecord.checkBy }}</el-descriptions-item>
        <el-descriptions-item label="盘点时间">{{ formatDate(selectedRecord.checkTime) }}</el-descriptions-item>
        <el-descriptions-item label="盘点结果">{{ getStatusText(selectedRecord.status) }}</el-descriptions-item>
        <el-descriptions-item label="备注" v-if="selectedRecord.remark">{{ selectedRecord.remark }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    
    <!-- 编辑对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑盘点记录"
      width="40%"
      :before-close="handleEditClose"
    >
      <el-form :model="editForm" label-width="120px" :rules="editRules" ref="editFormRef">
        <el-form-item label="盘点结果" prop="status">
          <el-radio-group v-model="editForm.status">
            <el-radio label="normal">正常</el-radio>
            <el-radio label="lost">丢失</el-radio>
            <el-radio label="damage">损坏</el-radio>
            <el-radio label="moved">位置不符</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="当前位置" prop="currentLocation">
          <el-input v-model="editForm.currentLocation" placeholder="请输入当前位置" />
        </el-form-item>
        
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="editForm.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleEditClose">取消</el-button>
          <el-button type="primary" @click="submitEdit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { Download } from '@element-plus/icons-vue'

export default {
  name: 'CheckRecord',
  components: {
    Download
  },
  data() {
    return {
      loading: false,
      searchParams: {
        planId: '',
        keyword: '',
        status: '',
        checkTimeRange: []
      },
      currentPage: 1,
      pageSize: 10,
      total: 150,
      recordsData: [
        {
          id: 1,
          assetCode: 'IT-2023-0001',
          assetName: 'Dell笔记本电脑',
          assetType: '电子设备',
          department: '技术部',
          user: '张三',
          planName: '2024年Q1季度盘点',
          checkBy: '张三',
          checkTime: new Date('2024-03-15 10:23:45'),
          status: 'normal',
          originalValue: 6800,
          currentStatus: '在用',
          location: 'A栋5楼技术部'
        },
        {
          id: 2,
          assetCode: 'OF-2023-0045',
          assetName: '办公椅',
          assetType: '办公家具',
          department: '市场部',
          user: '王五',
          planName: '2024年Q1季度盘点',
          checkBy: '李四',
          checkTime: new Date('2024-03-15 10:15:30'),
          status: 'normal',
          originalValue: 800,
          currentStatus: '在用',
          location: 'B栋3楼市场部'
        },
        {
          id: 3,
          assetCode: 'IT-2022-0132',
          assetName: 'HP打印机',
          assetType: '电子设备',
          department: '行政部',
          user: '钱七',
          planName: '2024年Q1季度盘点',
          checkBy: '赵六',
          checkTime: new Date('2024-03-15 09:45:12'),
          status: 'lost',
          originalValue: 1200,
          currentStatus: '丢失',
          location: 'A栋2楼行政部',
          remark: '盘点未找到设备，疑似丢失'
        },
        {
          id: 4,
          assetCode: 'VE-2021-0008',
          assetName: '联想台式机',
          assetType: '电子设备',
          department: '财务部',
          user: '孙八',
          planName: '2024年2月月度盘点',
          checkBy: '周九',
          checkTime: new Date('2024-02-28 15:30:22'),
          status: 'damage',
          originalValue: 4500,
          currentStatus: '损坏',
          location: 'B栋2楼财务部',
          remark: '电脑显示器损坏，无法正常使用'
        },
        {
          id: 5,
          assetCode: 'IT-2023-0156',
          assetName: '无线鼠标',
          assetType: '电子设备',
          department: '技术部',
          user: '吴十',
          planName: 'IT设备专项盘点',
          checkBy: '张三',
          checkTime: new Date('2024-03-10 14:20:15'),
          status: 'moved',
          originalValue: 120,
          currentStatus: '在用',
          location: 'A栋5楼技术部',
          remark: '位置与系统记录不符，已更新位置信息'
        }
      ],
      selectedRows: [],
      detailDialogVisible: false,
      editDialogVisible: false,
      selectedRecord: {},
      editForm: {
        status: '',
        currentLocation: '',
        remark: ''
      },
      editRules: {
        status: [
          { required: true, message: '请选择盘点结果', trigger: 'change' }
        ],
        currentLocation: [
          { required: true, message: '请输入当前位置', trigger: 'blur' }
        ]
      },
      editFormRef: null
    }
  },
  methods: {
    searchRecords() {
      this.loading = true
      console.log('搜索盘点记录:', this.searchParams)
      // 这里应该调用后端API获取数据
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    resetSearch() {
      this.searchParams = {
        planId: '',
        keyword: '',
        status: '',
        checkTimeRange: []
      }
      this.searchRecords()
    },
    exportRecords() {
      console.log('导出盘点记录')
      if (this.selectedRows.length > 0) {
        console.log('导出选中记录:', this.selectedRows)
        this.$message.success('选中记录导出成功')
      } else {
        console.log('导出全部记录')
        this.$message.success('全部记录导出成功')
      }
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    getStatusTagType(status) {
      const typeMap = {
        normal: 'success',
        lost: 'danger',
        damage: 'warning',
        moved: 'info'
      }
      return typeMap[status] || 'info'
    },
    getStatusTagEffect(status) {
      return status === 'lost' || status === 'damage' ? 'dark' : 'light'
    },
    getStatusText(status) {
      const textMap = {
        normal: '正常',
        lost: '丢失',
        damage: '损坏',
        moved: '位置不符'
      }
      return textMap[status] || '未知'
    },
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      return d.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    viewRecordDetail(record) {
      this.selectedRecord = { ...record }
      this.detailDialogVisible = true
    },
    handleDetailClose() {
      this.detailDialogVisible = false
      this.selectedRecord = {}
    },
    editRecord(record) {
      this.selectedRecord = { ...record }
      this.editForm = {
        status: record.status,
        currentLocation: record.location,
        remark: record.remark || ''
      }
      this.editDialogVisible = true
    },
    handleEditClose() {
      this.editDialogVisible = false
      if (this.editFormRef) {
        this.$refs.editFormRef.resetFields()
      }
    },
    submitEdit() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          console.log('提交编辑:', this.editForm)
          this.$message.success('编辑成功')
          this.editDialogVisible = false
          this.searchRecords()
        }
      })
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.searchRecords()
    },
    handleCurrentChange(current) {
      this.currentPage = current
      this.searchRecords()
    }
  }
}
</script>

<style scoped>
.check-record-container {
  padding: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.search-form {
  margin: 0;
}

.records-card {
  margin-bottom: 20px;
}

.remark-content {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>